<template>
  <div class="OrderView">
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="订单详细"
      left-arrow
      @click-left="onClickLeft"
      class="topNav"
    />
    <!-- 订单详细 -->
    <div class="orderDetail">
      <van-card
        v-for="order in orderData"
        :key="order.id"
        :num="order.number"
        :price="order.price"
        :desc="order.product.description"
        :title="order.product.name"
        :thumb="order.product.photo"
      >
      </van-card>
    </div>
    <div class="moneyTotal">
      <div>总价：<span class="totalPrice">{{orderAllInfo.total}}</span></div>
    </div>
    <div class="footer">
      <div class="footer-wenzi">
        服务地址：{{ addressInfo.province }}{{ addressInfo.city
        }}{{ addressInfo.area }}{{ addressInfo.address}}
      </div>
      <div class="footer-wenzi">联系方式：{{orderAllInfo.customer.username}}（{{orderAllInfo.customer.telephone}}）</div>
      <div class="footer-wenzi">下单时间：{{orderAllInfo.orderTime | dateFormat}}</div>
      <div class="footer-wenzi">服务时间：{{orderAllInfo.serviceTime | dateFormat}}</div>
      <div class="footer-wenzi">{{orderAllInfo.status}}</div>
    </div>
    <div style="height: 80px;"></div>
  </div>
</template>

<script>
import { get } from "@/http/axios";
export default {
  data() {
    return {
      orderId: this.$route.query.orderIndex,
      orderData: {},
      addressInfo: {},
      orderAllInfo: {},
    };
  },
  methods: {
    // 返回按钮，返回主页
    onClickLeft() {
      this.$router.push({
        path: "/manager/Home",
      });
    },
    // 获取订单信息
    async getOrderInfo() {
      let id = this.orderId;
      let res = await get("/order/findById", { id });
      this.orderData = res.data.data.orderLines;
      this.addressInfo = res.data.data.address;
      this.orderAllInfo = res.data.data;
      console.log(this.orderAllInfo);
    },
  },
  created() {
    this.getOrderInfo();
  },
};
</script>

<style scoped>
.topNav {
  background-image: linear-gradient(to right, #ffe5db, #cbd2ff);
}
.moneyTotal {  
  padding: 20px 0;
  margin: 10px 0;
  margin-left: 75%;
  font-size: 16px;
}
.totalPrice{
  color: #fd452d;
}
.footer {
  position: relative;
  background-color: rgba(248, 247, 247, .4);
  margin-left: 2px;
  margin-right: 2px;
  padding-bottom: 12px;
  font-size: 14px;
  color: rgb(111, 111, 111);
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, .09);
}
.footer-wenzi {
  padding-top: 10px;
  margin-left: 10px;
}
.footer-wenzi:nth-child(5){
  position: absolute;
  right: 15px;
  bottom: 13px;
  color: #fd682d;
}
.orderDetail{
  padding: 10px 0;
}
</style>